<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: ChenYu
  Date: 2017-06-13
  Time: 18:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%@include file="../public/app/commonJs.jsp" %>
    <title>精品鞋款</title>
</head>
<body>
<%@include file="../public/app/nav.jsp" %>
<p class="detail-name align_center">${s.name}</p>

<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <c:forEach items="${s.shoesImgList}" var="si">
            <div class="swiper-slide"><img src="${baseInfo.fileServerPath}${si.imageUrl}" width="100%"/></div>
        </c:forEach>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>
<style>
    .swiper-pagination-bullet-active {
        background: #333;
    }

    .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: 0px;
    }
</style>
<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
</script>
<div class="align_left list-select wrap-select-shoose">
    	<span class="select select-shoose js_select" style="width:100%;box-sizing:border-box;">
        	<i class="text">${s.color} </i>
            <select>
                <c:forEach var="c" items="${colors}">
                    <option value="${c}" <c:if test="${c eq s.color}">selected</c:if>>${c}</option>
                </c:forEach>
            </select>
        </span>
</div>
<div class="align_left list-select wrap-select-shoose">
    	<span class="select select-shoose js_select2" style="width:100%;box-sizing:border-box;">
        	<i class="text">${s.shoeBelow} </i>
            <select>
                <c:forEach var="sb" items="${shoeBelows}">
                    <option value="${sb}" <c:if test="${sb eq s.shoeBelow}">selected</c:if>>${sb}</option>
                </c:forEach>
            </select>
        </span>
</div>
<div class="shooseInfo mb40">
    <p class="price">￥${s.price}</p>
    <a href="${s.taoBaoHref}" class="button-buy mb20">进入淘宝旗舰店</a>
    <div class="edit">
        <p>${s.description}</p>
    </div>
    <p class="size">材质：${s.material} / 鞋底：${s.shoeBelow} / 尺寸：${s.sizeRange}</p>
</div>

<div class="line mb40"></div>

<div class="container">

    <p class="title2 align_center mb20">更多相似</p>

    <div class="row list-product mb40">
        <c:forEach items="${ss}" var="s1">
            <div class="col-xs-6 col-sm-3">
                <p class="img">
                    <a href="${ctx}/app/shoes/${s1.id}">
                        <c:if test="${empty s1.coverImg}">
                            <img src="${ctx}/static/web/images/bj-xz.png" width="100%">
                        </c:if>
                        <c:if test="${not empty s1.coverImg}">
                            <img src="${baseInfo.fileServerPath}${s1.coverImg}" width="100%">
                        </c:if>

                    </a>
                </p>
                <p class="title"><a href="${ctx}/app/shoes/${s1.id}">${s1.name}</a></p>
                <p class="title2"><a href="${ctx}/app/shoes/${s1.id}">￥${s1.price}</a></p>
            </div>
        </c:forEach>
    </div>
</div>
<%@include file="../public/app/footer.jsp" %>
<script type="text/javascript">
    $(".js_select select").change(function () {
        var text = $(this).val();
        var style = '${s.style}';
        var url = "${ctx}/shoes/selectOne";
        var dataStr = {
            color: text,
            shoeBelow: '${s.shoeBelow}',
            style: style,
            belongSex:'${s.belongSex}'
        }
        ajaxUtil.post(url, dataStr, false, function (data) {
            window.location.href = "${ctx}/app/shoes/" + data.dataMap.shoes.id;
        })
    });
    $(".js_select2 select").change(function () {
        var text = $(this).val();
        var style = '${s.style}';
        var url = "${ctx}/shoes/selectOne";
        var dataStr = {
            color: '${s.color}',
            shoeBelow: text,
            style: style,
            belongSex:'${s.belongSex}'
        }
        ajaxUtil.post(url, dataStr, false, function (data) {
            console.log(data);
            window.location.href = "${ctx}/app/shoes/" + data.dataMap.shoes.id;
        })
    });
</script>
</body>
</html>

